<script lang="ts" setup>
import type { HotTopicType } from '@/types/hot-topic'
const props = defineProps<{
    topicData: HotTopicType[]
}>()
</script>

<template>
    <view class="topic" v-for="item in props.topicData" :key="item.id">
        <image class="topic-image" :src="item.avatar" mode="scaleToFill" />
        <view class="topic-text">
            <h1 class="topic-text-h1">{{ item.title }}</h1>
            <text class="topic-text-text">{{ item.quantity }}人参与</text>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.topic {
    display: flex;
    gap: 30rpx;
    margin-bottom: 40rpx;

    &-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
    }

    &-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &-h1 {
            font-size: 35rpx;
        }

        &-text {
            font-size: 28rpx;
            color: #999999;
        }
    }
}
</style>